<template>
  <div>
    <form-panel ref="formBase" :template="template" :data="org" @changeData="changeData" :editStatus="editStatus">
      <template slot="foot" v-if="editStatus">
        <el-button size="small" type="primary" @click="onSubmit">立即创建</el-button>
        <el-button size="small" @click="$refs.formBase.redata();">取消</el-button>
      </template>
    </form-panel>
    <div class="app-editstatus-button">
      <el-switch v-model="editStatus"></el-switch>
    </div>
  </div>
</template>
<script>
export default {
  props: ["orgId"],
  data() {
    return {
      editStatus: false,
      org: {},
      orgTemp: {},
      template: {}
    };
  },
  created() {
    this.init();
    var that = this;
    import("./template-dept-baseinfo.json").then(function(data) {
      that.template = data.default;
    });
    // console.debug(this.template);
  },
  watch: {
    orgId() {
      this.init();
    }
  },
  methods: {
    init() {
      this.org = {};
      this.getOrg();
    },
    getOrg() {
      this.$http({
        url: this.$URL_ADDR.org.one,
        method: "GET"
      }).then(resp => {
        this.org = resp.data.data;
      });
    },
    changeEditStatus() {
      this.editStatus = !this.editStatus;
    },
    changeData(orgTemp) {
      this.orgTemp = orgTemp;
      // console.debug(this.orgTemp);
    },
    onSubmit() {
      // console.debug(this.orgTemp);
      this.org = this.orgTemp;
      this.changeEditStatus();
    }
  }
};
</script>
